<template>
    <div class="search-history">
        <van-cell title="历史记录" center>
            <template #default>
                <div v-if="isDeleteShow">
                    <span class="delete-text" @click="$emit('updatasearchHistories', [])">全部删除</span>
                    <span @click="isDeleteShow = false">完成</span>
                </div>
                <van-icon name="delete-o" v-else @click="isDeleteShow = true" />
            </template>
        </van-cell>
        <van-cell :title="item" center v-for="(item, index) in searchHistories" :key="index"
            @click="onClickItem(item, index)">
            <template #right-icon>
                <van-icon name="close" v-if="isDeleteShow" />
            </template>
        </van-cell>
    </div>
</template>

<script>
export default {
    name: 'SearchHistory',
    props: {
        searchHistories: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            isDeleteShow: false
        }
    },
    methods: {
        onClickItem(item, index) {
            if (this.isDeleteShow) {
                this.searchHistories.splice(index, 1)
            } else {
                this.$emit('search', item)
            }
        }
    }
}
</script>

<style scoped lang="less">
.search-history {
    :deep(.delete-text) {
        margin-right: 16px;
    }
}
</style>